<template>
  <div class="setting-content">
    <div class="title">
      <el-button type="primary" @click="handleAddContact" style="margin-right: 10px">新增联系人</el-button>
      <SearchCmp
        style="margin: 10px 0;"
        v-if="searchCmpArray.length"
        :searchCmpArray="searchCmpArray"
        :searchForm="params"
        @onSubmit="onSubmit"
      />
    </div>
    <div class="content">
      <RuifoxTable
        :loading="tableLoading"
        :default-index="true"
        v-model:tableData="tableData"
        v-model:fieldList="fieldList"
      >
        <!-- <template #name='{element}'>
          <div class="img-title">
            <div class="img-box">
              <img class="icon" v-if="element.type != 1" :src="getAvatarUrl(element.type)" alt="">
              <img class="pic" v-else :src="element.url" alt="">
            </div>
            <span class="file-name">{{element.name}}</span>
          </div>
        </template> -->
        <template #options='{element}'>
          <div class="table-td-option">
            <el-button type="primary" link @click="handleEdit(element)" >编辑</el-button>
            <el-button type="primary" link @click="handleDelete(element)" >删除</el-button>
          </div>
        </template>
      </RuifoxTable>

      <PaginationViewSimple
        :total="params.total"
        :pageSize="params.pageSize"
        :currentPage="params.currentPage"
        @currentChange="handleCurrentPageChange"
        @changeSize="handlePageSizeChange"
      />
    </div>
    <!-- 新增 -->
    <el-dialog
      v-model="contactDialog"
      draggable
      title="新增"
      width="600px"
      class="add-contact-dialog"
    >
      <el-form 
        :model="contactForm" 
        label-width="auto" 
        ref="contactFormRef" 
        :rules="contactRules"
      >
      <el-form-item label="姓名：" prop="name">
        <el-input v-model="contactForm.name" placeholder="不支持空格，最多支持20汉字"></el-input>
      </el-form-item>
      <el-form-item label="手机号：" prop="phone">
        <div class="row">
          <el-input v-model="contactForm.phone" placeholder="请输入手机号"></el-input>
          <el-button>发送验证码</el-button>
        </div>
      </el-form-item>
      <el-form-item label="手机验证码：" prop="phoneCode">
        <el-input v-model="contactForm.phoneCode" placeholder="请输入手机验证码"></el-input>
      </el-form-item>
      <el-form-item label="邮箱：" prop="email">
        <div class="row">
          <el-input v-model="contactForm.email" placeholder="请输入邮箱"></el-input>
          <el-button>发送验证码</el-button>
        </div>
      </el-form-item>
      <el-form-item label="邮箱验证码：" prop="emailCode">
        <el-input v-model="contactForm.emailCode" placeholder="请输入邮箱验证码"></el-input>
      </el-form-item>
    </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="contactDialog = false">取消</el-button>
          <el-button type="primary" @click="contactSubmit(contactFormRef)">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { getContactList, addContact, editContact, deleteContact } from "@/api/personal/info/noticeSetting"
import { ElMessage, ElMessageBox } from "element-plus";

const fieldList = ref([
  {
    title: '姓名',
    name: 'name',
  },
  {
    title: '手机号',
    name: 'phone'
  },
  {
    title: '邮箱',
    name: 'email',
  },
  {
    title: '上次更新时间',
    name: 'lastUpdateTime',
  },
  {
    title: '操作',
    width: 180,
    fixed: 'right',
    name: 'options'
  }
])

const params = ref({
  total: 0,
  pageSize: 30,
  currentPage: 1,
  keywords: null,
})
const tableData = ref([])
const tableLoading = ref(false)
const hanldeGetTableData = async () => {
  tableLoading.value = true
  let res = await getContactList(params.value).finally(()=>{
    setTimeout(() => {
      tableLoading.value = false
      if(process.env.NODE_ENV === 'development') {
        tableData.value = [
          { 
            id: 1,
            name: '谭文杰',
            phone: '13600000000',
            email: '1666666666@qq.com',
            lastUpdateTime: '2022-01-01 12:00:00',
          },
          { 
            id: 2,
            name: '胡伯冰',
            phone: '13600000000',
            email: '1666666666@qq.com',
            lastUpdateTime: '2022-01-01 12:00:00',
          },
        ]
        params.value.total = tableData.value.length
      }
    }, 1000);
  })
  tableData.value = res.data
  params.value.total = res.total
}
hanldeGetTableData()

const onSubmit = () => {
  params.value.currentPage = 1
  hanldeGetTableData()
}
const handleCurrentPageChange = (page) => {
  params.value.currentPage = page
  hanldeGetTableData()
}
const handlePageSizeChange = (size) => {
  params.value.currentPage = 1
  params.value.pageSize = size
  hanldeGetTableData()
}
const searchCmpArray = ref([
  { label: '智能匹配', key: 'keywords' },
])

// 新增
const contactDialog = ref(false)
const contactFormRef = ref()
const contactRules = ref({
  name: [{ required: true, message: '请输入内容', trigger: 'blur' }],
  reply: [{ required: true, message: '请输入内容', trigger: 'blur' }],
  phone: [
    { required: true, message: '请输入内容', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
  ],
  phoneCode: [{ required: true, message: '请输入内容', trigger: 'blur' }],
  email: [{ required: true, message: '请输入内容', trigger: 'blur' }],
  emailCode: [{ required: true, message: '请输入内容', trigger: 'blur' }],
})
const curRow = ref({})
const defaultcontactForm = {
  name: '', //姓名
  phone: '', //手机号
  phoneCode: '', //手机验证码
  email: '', //邮箱
  emailCode: '', //邮箱验证码
}
const contactForm = ref(structuredClone(defaultcontactForm))
// 新增
const handleAddContact = (data) => {
  curRow.value = data
  contactForm.value = structuredClone(defaultcontactForm)
  contactDialog.value = true
}
// 编辑
const handleEdit = (data) => {
  contactForm.value = structuredClone(data)
  contactDialog.value = true
}
// 提交
const contactSubmit = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid) => {
    if (valid) {
      if(contactForm.value.id){
        // 编辑
        editContact(contactForm.value).then(res=>{
          contactDialog.value = false
          if(res.code == 20000){
            ElMessage({
              showClose: true,
              message: '操作成功',
              type: 'success',
            })
            hanldeGetTableData()
          }
        })
      }else{
        // 新增
        addContact(contactForm.value).then(res=>{
          contactDialog.value = false
          if(res.code == 20000){
            ElMessage({
              showClose: true,
              message: '操作成功',
              type: 'success',
            })
            hanldeGetTableData()
          }
        })
      }
    }
  })
}

// 删除
const handleDelete = (data) => {
  ElMessageBox.confirm(
    '<div><p style="font-size: 16px;margin-bottom: 15px;">是否删除该数据？</p></div>',
    '删除确认',
    {
      dangerouslyUseHTMLString: true,
      confirmButtonText: '确认',
      cancelButtonText: '取消',
    }
  ).then(() => {
    deleteContact({ids:[data.id]}).then(res=>{
      if(res.code == 20000){
        ElMessage({
          showClose: true,
          message: '操作成功',
          type: 'success',
        })
        hanldeGetTableData()
      }
    })
  })
}

</script>
<style scoped lang='scss'>
.setting-content{
  .title{
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
  }
  .add-contact-dialog{
    .row{
      width: 100%;
      display: flex;
      align-items: center;
      gap: 10px;
    }
  }
}
</style>